package com.universest.swordholder.ui.screen

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.universest.swordholder.ui.theme.SwordHolderTheme
import com.universest.swordholder.viewmodel.MainScreenViewModel
import androidx.compose.runtime.getValue
import androidx.compose.runtime.key
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.lifecycle.viewmodel.compose.viewModel
import com.universest.swordholder.SwordHolderApplication
import com.universest.swordholder.viewmodel.ChatScreenViewModel
import com.universest.swordholder.viewmodel.WorksViewModel
import kotlinx.coroutines.launch

@Composable
fun MainScreen(modifier: Modifier = Modifier,viewModel: MainScreenViewModel = viewModel()) {
    val context = LocalContext.current
    val tabs by viewModel.tabs.collectAsStateWithLifecycle()
    val currentTab by viewModel.currentTab.collectAsStateWithLifecycle()
    val scope = rememberCoroutineScope()
    val pagerState = rememberPagerState(
        initialPage = tabs.indexOfFirst { it.id == currentTab.id }.takeIf { it >= 0 } ?: 0,
        pageCount = { tabs.size }
    )
    LaunchedEffect(pagerState.currentPage) {
        viewModel.setCurrentTab(tabs[pagerState.currentPage])
    }
    val worksScreenViewModel: WorksViewModel = viewModel()
    val chatScreenViewModel: ChatScreenViewModel = viewModel()
    Column(modifier = modifier) {
        Box(modifier = Modifier
            .fillMaxWidth()
            .height(0.dp)
            .weight(1f)){
            HorizontalPager(
                state = pagerState,
                modifier = Modifier.fillMaxSize(),
                beyondViewportPageCount = 2,
                key = { tabs[it].id } // 添加 key 以便 Compose 可以识别并复用页面实例
            ) { page ->
                key(tabs[page].id) { // 给每个页面加上唯一 key
                    when(tabs[page].id){
                        0 -> WorksScreen(modifier = Modifier.fillMaxSize(), viewModel = worksScreenViewModel)
                        1 -> ChatScreen(modifier = Modifier.fillMaxSize(), viewModel = chatScreenViewModel)
                        2 -> MeScreen(modifier = Modifier.fillMaxSize())
                    }
                }
            }
        }
        Row(modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)){
            tabs.forEachIndexed { index, tab ->
                val selected = tab.id == currentTab.id
                Column(modifier = Modifier
                    .clickable(
                        enabled = !selected,
                        onClick = {
                            viewModel.setCurrentTab(tab)
                            scope.launch {
                                pagerState.animateScrollToPage(index)
                            }
                        })
                    .weight(1f),
                    horizontalAlignment = Alignment.CenterHorizontally) {
                    val color = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onSurface
                    Icon(
                        imageVector = tab.icon,
                        contentDescription = null,
                        tint = color
                    )
                    Text(
                        text = tab.title,
                        color = color
                    )
                }
            }
        }
    }
}

@Preview
@Composable
fun MainScreenPreview() {
    SwordHolderApplication.previewContext = LocalContext.current
    SwordHolderTheme {
        MainScreen(modifier = Modifier.fillMaxWidth().height(600.dp))
    }
}